<template>
  <div class="components-container">
    <!-- 弹窗  -->
    <sweet-modal ref="dialog" class="dialog">
      <h3>{{title}} </h3>  <span>提示：列项宽度为0为自适应</span>
      <div style="margin:10px 10px">
      <el-table :data="tableData"  border class="tb-edit" style="width: 100%" highlight-current-row >
            <el-table-column label="列项名称" width="150">
                <template slot-scope="scope">
                    <el-input size="small" v-model="scope.row.DLXNAME" placeholder="请输入内容" :disabled="isshow"></el-input>
                </template>
            </el-table-column>
            <el-table-column label="宽度">
                <template slot-scope="scope">
                    <el-input size="small" v-model="scope.row.DLXWIDTH" placeholder="请输入内容" :disabled="isshow"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="address" label="排序号">
                <template slot-scope="scope">
                    <el-input size="small" v-model="scope.row.DLXNUM" placeholder="请输入内容" :disabled="isshow" ></el-input>
                </template>
            </el-table-column>
            <!-- <el-table-column  label="是否排序">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.ISORDERBY" placeholder="请选择" :disabled="isshow">
                    <el-option  key="A" label="排序" value="A"></el-option>
                    <el-option  key="B" label="不排序" value="B"></el-option>
                    </el-select>
                </template>
            </el-table-column> -->
            <el-table-column  label="是否显示">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.DLXSTATUS" placeholder="请选择" :disabled="isshow">
                    <el-option  key="A" label="显示" value="A"></el-option>
                    <el-option  key="B" label="隐藏" value="B"></el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column  label="对齐方式">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.DLXALIGN" placeholder="请选择" :disabled="isshow">
                   <el-option v-for="item in optionType" :key="item.CodeValue" :label="item.CodeName" :value="item.CodeValue">
                  </el-option>
                </el-select>
                </template>
            </el-table-column>
   </el-table>
      </div>
      <div class="layui-form-item btnCenter">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" :loading="this.$store.state.isloading" @click="submit">提交</el-button>
      </div>
    </sweet-modal>
  </div>
</template>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/common.scss";
.tb-edit .el-input {
  display: block;
}
.tb-edit .current-row .el-input {
  display: block;
}
// .tb-edit .current-row .el-input+span {
//     display: block
// }
</style>
<script>
import sweetModal from "@/components/sweetModal";
import apiBase from "@/api/apiBase.js";

const ADD = "新增";
const MODIFY = "修改";
const DELETE = "删除";
const INFO = "详情";
export default {
  name: "CremationfurnaceMain",
  data() {
    return {
      maxHeight: 500,
      tableData: [],
      title: null,
      optionType: [],
      title: null,
      order: null,
      creNo: null,
      creType: null,
      creStatus: null,
      selectData: {
        CYPTYPE: null,
        CYPNAME: null,
        CYPNUM: null,
        CYPSTATUS: "A"
      },
      isshow: false,
      CYPID: null
    };
  },
  methods: {
    //功能操作
    open(order, currentRow) {
      this.order = order;
      this.dataRepeat();
      this.isshow = false;
      if (currentRow) {
        this.DLIID = currentRow.DLIID;
      }
      switch (this.order) {
        case MODIFY:
          this.title = "列项修改";
          this.dataInfo(currentRow.DLIID);
          this.$refs.dialog.open();
          break;
        case INFO:
          this.title = "列项详情";
          this.dataInfo(currentRow.DLIID);
          this.isshow = true;
          this.$refs.dialog.open();
          break;
        default:
      }
    },
    //提交
    submit() {
      this.$store.state.isloading = true;
      switch (this.order) {
        case MODIFY:
          this.dataModify();
          break;
        case DELETE:
          break;
        case INFO:
          break;
        default:
      }
    },
    //获取类型
    getCreTypes() {
      apiBase.DoService({}, apiBase.getApiAdress().Code.QueryAlignList, res => {
        this.optionType = res.data.content;
      });
    },

    //详情
    dataInfo(id) {
      var data = {
        DLIID: id
      };
      apiBase.DoService(
        data,
        apiBase.getApiAdress().ColumnManage.Detail,
        res => {
          this.tableData = res.data.content;
        }
      );
    },
    //修改
    dataModify() {
      let data = {};
      data.DLIID = this.DLIID;
      data.Dlxs = this.tableData;
      apiBase.DoService(
        data,
        apiBase.getApiAdress().ColumnManage.Modify,
        res => {
          this.$refs.dialog.close();
          this.refreshData();
          this.$message({
            message: "修改成功！",
            type: "success"
          });
        },
        res => {
          this.$message.error(res.data.msg);
        }
      );
    },
    //删除
    dataDelete(id) {
      var data = {
        CYPID: id
      };
      this.$confirm("确认删除该数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(callback => {
          apiBase.DoService(data, apiBase.getApiAdress().Cyp.Delete, res => {
            this.refreshData();
            this.$message({
              message: "删除成功！",
              type: "success"
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //数据重置
    dataRepeat() {
      Object.assign(this.$data.selectData, this.$options.data().selectData);
    },
    refreshData() {
      this.$emit("refreshData");
    },
    closeDialog() {
      this.$refs.dialog.close();
    }
  },
  components: {
    sweetModal
  },
  mounted() {},
  created() {
    this.getCreTypes();
  }
};
</script>